<template>
	<om-page :title="pageTitle">
		<view style="z-index: 0;">
			<!-- #ifdef H5 -->
			<tui-tabs isFixed  :tabs="vTabs" bgColor="#7ab2ee" sliderBgColor="#5697F4" selectedColor="#5697F4" :currentTab="currentTab > 1 ? 0 : currentTab" @change="change" itemWidth="50%"></tui-tabs>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<tui-tabs :tabs="vTabs" bgColor="#e2eeee" sliderBgColor="#5697F4" selectedColor="#5697F4" :currentTab="currentTab > 1 ? 0 : currentTab" @change="change" itemWidth="50%"></tui-tabs>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view style="height: 40px"></view>
			<!-- #endif -->
			<view v-if="currentTab === 0" >
				<uni-list>
					<view class="" v-for="(item,index) of datas" :key="index">
						<uni-list-item
							:title="item.title?(item.title + ': ' + (item.userId === userId ? '我' : (item.userName || ''))):(item.userId === userId ? '我' : (item.userName || ''))"
							:thumb="getThumb(item)"
							@click="infoTab(item)"
							:extraText="item.startdate"
						>
						<view slot="note">
							{{'表单名称:'+item.formName}}
						</view>
						</uni-list-item>
					</view>
				</uni-list>
			</view>
			<view v-else>
				<uni-list>
					<view class="" v-for="(item,index) of datas2" :key="index">
						<uni-list-item
							:title="item.title?(item.title + ': ' + (item.userId === userId ? '我' : (item.userName || ''))):(item.userId === userId ? '我' : (item.userName || ''))"
							:thumb="getThumb(item)"
							@click="infoTab2(item)"
							:extraText="item.startdate"
						>
						<view slot="note">
							{{'表单名称:'+item.formName}}
						</view>
						</uni-list-item>
					</view>
				</uni-list>
			</view>
		</view>
		<uni-popup  id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="popup-tip" style="">
					{{'操作'}}
					<image @click="cancel" class="popup-tip-cancel" src="/static/images/others/cancel.png" mode=""></image>
				</view>
				<view class="popup-item-buttons">
					<view  @click="flowClick" class="popup-item-button1 padding">
						<text>流程查看</text>
					</view>
					<view v-if="item.isdraft" class="popup-item-button4 padding" @click="deleteForm">
						<text>删除表单</text>
					</view>
					<view v-else-if="item.isapprove"  class="popup-item-button2 padding" @click="changeUser(1)">
						<view v-if="!item.hasDraftWhenApprove">
							<text>更换审批人</text>
						</view>
					</view>
					<view  v-else-if="!item.hasDraftWhenApprove" class="">
						<view class="popup-item-button2 padding" @click="changeUser(2)">
							<text>更换审核人</text>
						</view>
						<view class="popup-item-button3 padding" @click="deleteUser">
							<text>删除审核人</text>
						</view>
					</view>
					<view  @click="lookInfo" class="popup-item-button5 padding">
						<text>详情</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup  id="popup3" ref="popup3" :type="'center'">
			<view class="popup-cotent padding">
				<view class="popup-tip" style="">
					{{'操作'}}
					<image @click="cancel3" class="popup-tip-cancel" src="/static/images/others/cancel.png" mode=""></image>
				</view>
				<view class="popup-item-buttons">
					<view v-if="!item.deleteFlag" @click="flowClick" class="popup-item-button1 padding">
						<text>流程查看</text>
					</view>
					<view  @click="lookInfo" class="popup-item-button5 padding">
						<text>详情</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup  id="popup2" ref="userPopup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="popup-tip" style="">
					{{'操作'}}
					<image @click="userCancel" class="popup-tip-cancel" src="/static/images/others/cancel.png" mode=""></image>
				</view>
				<uni-list>
					<uni-list-item @click="toUserSearch">
						<view class="" style="display: flex; flex-direction: row;">
							<om-label  :label="'选择替换人'"></om-label>
							<view class="">
								{{user.name || '请选择'}}
							</view>
						</view>
					</uni-list-item>
				</uni-list>
				<view class="flex long-data-btn padding-bottom" style="justify-content: space-evenly">
					<view class="om-bg-light" @click="userCancel">取消</view>
					<view class="om-bg" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>
	</om-page>
</template>

<script>
	import {confirmModal} from '@/static/js/common.js'
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	const app = getApp()
	export default{
		data(){
			return{
				thumbs: [app.globalData.icon.going, app.globalData.icon.over,app.globalData.icon.unapprove],
				pageTitle:'',
				currentTab:0,
				scrollTop:0,
				searchStr: '',
				datas: [],
				datas2:[],
				changeUserType:0,
				page:1,
				rows:20,
				page2:1,
				item:{},
				cachename:'showFlowUserCache',
				user:{
					name:'',
					id:''
				},
				vTabs: [
					{
						name: '待处理流程',
						badgeText:0
					},
					{
						name: '已处理流程',
						badgeText:0
					}
				],
				leaveApproveFileId:''
			}
		},
		computed: mapState(useLoginUserStore, ['userId']),
		methods:{
			lookInfo(){
				uni.setStorage({
					key:'flowInfoCache',
					data:this.item
				})
				uni.navigateTo({
					url:'./showFlowInfo?currentIndex='+this.currentTab
				})
			},
			deleteForm(){
				let _that = this
				confirmModal(_that,'提示信息','确认要删除该流程表单吗？',()=>{
					_that.om.request(
						"leaveFlowEditHistory/doModifyByLeaveApproveUser",
						{
							flowNodeInfoId: _that.item.id,
							leaveUserId: _that.item.leaveUserId,
							leaveApproveFileId: _that.leaveApproveFileId,
							flowRole: _that.item.flowRole,
							delForm: true
						}
					).then(res=>{
						_that.$refs.popup.close()
						this.page = 1
						this.initLoad()
					})
				},()=>{
					
				})
			},
			deleteUser(){
				let _that = this
				confirmModal(_that,'提示信息','确认要删除离职人'+_that.item.leaveUserName+'的该流程节点吗？',()=>{
					_that.om.request(
						"leaveFlowEditHistory/doModifyByLeaveApproveUser",
						{
							flowNodeInfoId: _that.item.id,
							leaveUserId: _that.item.leaveUserId,
							leaveApproveFileId: _that.leaveApproveFileId,
							flowRole:_that.item.flowRole,
							delFlowUser: true
						}
					).then(res=>{
						_that.$refs.popup.close()
						this.page = 1
						this.initLoad()
					})
				},()=>{
					
				})
			},
			userCancel(){
				let _that = this
				_that.$refs.userPopup.close()
			},
			confirm(){
				let _that = this
				let param = {
						replaceFlowUser: '',
						replaceApproveUser:'',
						newFlowUserId: _that.user.id,
						flowNodeInfoId: _that.item.id,
						leaveUserId:_that.item.leaveUserId,
						leaveApproveFileId: _that.leaveApproveFileId,
						flowRole: _that.item.flowRole,
					}
				if(_that.changeUserType == 1 ){
					param.replaceApproveUser = true
					param.replaceFlowUser = ''
				}else{
					param.replaceFlowUser = true
					param.replaceApproveUser = ''
				}
				_that.om.request(
					"leaveFlowEditHistory/doModifyByLeaveApproveUser",
					param
				).then(res=>{
					_that.$refs.userPopup.close()
					this.page = 1
					this.initLoad()
					_that.user.id=''
					_that.user.name=''
				})
			},
			toUserSearch(){
				let _that = this
				uni.navigateTo({
					url:"../searchUser/searchUser?isSingle=true&cachename="+_that.cachename
				})
			},
			changeUser(e){
				let _that = this
				_that.changeUserType = e
				_that.$refs.popup.close()
				_that.$refs.userPopup.open()
			},
			flowClick(){
				uni.navigateTo({
					url:"./showFlow?busCode="+this.item.formCode+'&fileId='+this.item.fileId
				})
			},
			cancel(){
				this.$refs.popup.close()
			},
			cancel3(){
				this.$refs.popup3.close()
			},
			infoTab2(item){
				this.item = item
				this.$refs.popup3.open()
			},
			infoTab(item){
				this.item = item
				this.$refs.popup.open()
			},
			getThumb(item){
				if(this.forAll){
					//#ifdef APP-PLUS
					return '/static' + item.iconName
					//#endif
					//#ifndef APP-PLUS
					return 'static' + item.iconName
					//#endif
				}else{
					if(item.fileStatus){
						if(item.fileStatus === '23556'){
							return this.thumbs[1]
						}else if(item.fileStatus === '34781')
							return this.thumbs[2]
						else{
							return this.thumbs[0]
						}
					}else{
						if(item.isover){
							return this.thumbs[1]
						}else{
							return this.thumbs[0]
						}
					}
				}
			},
			change(e) {
				this.currentTab = e.index;
				this.$refs.popup.close()
				this.$refs.userPopup.close()
				this.$refs.popup3.close()
			},
			initLoad(){
				let arr = [
					this.om.request(
						"leaveFlowEditHistory/getLeaveUserFlowDataGrid_h5",
						{
							leaveApproveFileId: this.leaveApproveFileId,
							page: this.page,
							rows: this.rows
						}
					),
					this.om.request(
						"leaveFlowEditHistory/getLeaveUserReplacedFlowDataGrid",
						{
							leaveApproveFileId: this.leaveApproveFileId,
							page: this.page2,
							rows: this.rows
						}
					)
				]
				Promise.all(arr).then(res=>{
					if(res[0].rows){
						this.datas = res[0].rows
						this.vTabs[0].badgeText = res[0].rows.length
					}
					if(res[1].rows){
						this.datas2 = res[1].rows
						this.vTabs[1].badgeText = res[1].rows.length
					}
				})
			}
		},
		onShow() {
			let _that = this
			uni.getStorage({
				key:_that.cachename,
				success:(res)=>{
					if(res.data[0]){
						let d = res.data[0]
						_that.user.name = d.username
						_that.user.id = d.id
					}
					uni.removeStorage({
						key:_that.cachename
					})
				}
			})
		},
		onLoad(e){
			this.userName = e.userName
			this.leaveApproveFileId = e.leaveApproveFileId
			this.initLoad()
		},
		onReachBottom(){
			if(this.currentTab == 0){
				this.page += 1
			}else{
				this.page2 += 1
			}
			this.initLoad()
		}
	}
</script>

<style scoped>
	.footerSize{
		font-size: 14px;
	}
	.popup-item-button1{
		background-color: #4C8655;
	}
	.popup-item-button2{
		background-color: #0D98A7;
	}
	.popup-item-button3{
		background-color: #0A7CA7;
	}
	.popup-item-button4{
		background-color: #AF4226;
	}
	.popup-item-button5{
		background-color: #5697F4;
	}
	.popup-item-button1 , .popup-item-button2 ,.popup-item-button3 ,.popup-item-button4,.popup-item-button5{
		width: 120px;
		height:40px;
		color: white;
		font-size: 16px;
		border-bottom: 1px solid #EEEEEE;
		margin-top: 10px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
	}
	.popup-cotent{
		display: flex;
		flex-direction: column;
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.popup-tip-cancel{
		width:20px;
		height:20px;
		position: absolute;
		right: 20px;
	}
	.long-data-btn view{
		width: 40%;height: 80rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		font-size: 16px;
	}
	.popup-item-buttons{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>                                                  
